<template>
  <div class="songList-image"></div>
  <div class="songList-mask"></div>
  <div class="songList-container">
    <h1 class="songList-logo">
      <a href="javascript:;">
        <img src="./img/player_logo.png" alt="" class="songList-logo-img" />
      </a>
    </h1>
    <div class="songList-wrap">
      <div class="songList-box">
        <div class="songList-toolbar">
          <a href="javascript:;" class="songList-btn">
            <i class="songList-collection"></i>
            收藏
          </a>
          <a href="javascript:;" class="songList-btn">
            <i class="songList-add"></i>
            添加到
          </a>
          <a href="javascript:;" class="songList-btn">
            <i class="songlist-download"></i>
            下载
          </a>
          <a href="javascript:;" class="songList-btn">
            <i class="songlist-delete"></i>
            删除
          </a>
          <a href="javascript:;" class="songList-lastbtn">
            <i class="songlist-empty"></i>
            清空列表
          </a>
        </div>
        <div>
          <ul class="songList-header">
            <li class="songList-header-firstli">
              <input type="text" />
            </li>
            <li class="songList-header-secondli">歌曲</li>
            <li class="songList-header-thirdli">歌手</li>
            <li class="songList-header-lastli">时长</li>
          </ul>
          <ul class="songList-content">
            <li class="songList-content-list" v-for="(item, index) in Data">
              <ul>
                <li class="songList-content-firstli">
                  <input type="text" />
                </li>
                <li class="songList-content-index">{{ index + 1 }}</li>
                <li class="songList-content-secondli">
                  <a href="javascript:;" class="jinx">{{ item.name }}</a>
                </li>
                <li class="songList-content-thirdli">
                  <a href="javascript:;">{{ item.author }}</a>
                </li>
                <li class="songList-content-lastli">
                  {{ processingTime(item.time) }}
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div></div>
      </div>
    </div>
  </div>
  <div class="PlayPosition">
    <Play :id="id" :currentIndex="currentIndex" :Data="Data"></Play>
  </div>
</template>

<script>
export default {
  name: 'SongList2',
}
</script>

<script setup>
import Play from '@/components/play'
import { ref, onMounted, nextTick } from 'vue'

const processingTime = time => {
  let m = Math.floor(time / 1000 / 60)
  let s = Math.ceil((time / 1000) % 60)
  if (m < 10) {
    m = '0' + m
  }
  if (s < 10) {
    s = '0' + s
  }
  return m + ':' + s
}

const id = localStorage.getItem('id')
const currentIndex = localStorage.getItem('currentIndex')
const Data = JSON.parse(localStorage.getItem('Data')).map(item => {
  return {
    id: item.id,
    name: item.name,
    picUrl: item.picUrl,
    time: item.time,
    author: item.author.map(key => key.name).join('/'),
  }
})
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}

.songList-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.songList-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #292a2b;
  background-color: rgba(0, 0, 0, 0.8);

  // background-color: rgb(255, 255, 255);
}
.songList-image {
  opacity: 0.6;
  filter: blur(10px);
  background-size: 100% 100%;
  background-image: url(./img/backgroundimage.webp);
  background-repeat: no-repeat;
  // background-color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, 0.35);
  // z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.songList-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 78px;
  height: 27px;
}

.songList-logo-img {
  width: 78px;
  height: 21px;
  opacity: 0.3;
}
.songList-wrap {
  position: absolute;
  top: 11%;
  min-height: 328px;
  cursor: default;
  margin: 0 147px;
}
.songList-box {
  // position: absolute;
  height: 415px;
}
.songList-toolbar {
  height: 40px;
  margin-bottom: 20px;
}
.songList-btn {
  border-radius: 2px;
  font-size: 14px;
  margin-right: 6px;
  padding: 0 23px;
  height: 38px;
  line-height: 38px;
  display: inline-block;
  width: 74px;
  color: #ffffff;
  text-align: center;
  border: 1px solid #ccc;
  opacity: 0.8;
  border-color: hsla(0, 0%, 100%, 0.2);
}
a,
a:hover {
  text-decoration: none;
  opacity: 1;
  color: #fff;
  filter: none;
  border-color: #fff;
}
.songList-collection,
.songList-add,
.songlist-download,
.songlist-delete,
.songlist-empty {
  width: 16px;
  height: 16px;

  vertical-align: -4px;
  display: inline-block;
  margin-right: 6px;
  background-image: -webkit-image-set(
    url(./img/icon_sprite.630b3e60.png) 1x,
    url(./img/icon_sprite@2x.bf4cef49.png) 2x
  );
}
.songList-collection {
  background-position: -60px -20px;
}
.songList-add {
  background-position: -20px -20px;
}
.songlist-download {
  background-position: -40px -240px;
}
.songlist-delete {
  background-position: -100px -20px;
}
.songlist-empty {
  width: 17px;
  height: 17px;
  background-position: -40px -300px;
}
.songList-lastbtn {
  border-radius: 2px;
  font-size: 14px;
  margin-right: 6px;
  padding: 0 23px;
  height: 38px;
  line-height: 38px;
  display: inline-block;
  width: 85px;
  color: #ffffff;
  text-align: center;
  border: 1px solid #ccc;
  opacity: 0.8;
  border-color: hsla(0, 0%, 100%, 0.2);
}
.songList-header {
  overflow: hidden;
  display: flex;
  li {
    float: left;
    height: 50px;
    line-height: 50px;
    color: #fff;
    align-items: center;
  }
  .songList-header-firstli {
    margin-top: 20px;
    box-sizing: border-box;
    position: relative;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;

    input {
      width: 14px;
      height: 14px;
      border: 0;
      position: absolute;
      background: transparent;
    }
  }
  .songList-header-secondli {
    width: 695px;
    margin-left: 40px;
  }
  .songList-header-thirdli {
    width: 250px;
    padding-left: 15px;
  }
  .songList-header-lastli {
    width: 95px;
  }
}
.songList-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 400px;
  overflow: scroll;
  li {
    float: left;
    height: 50px;
    line-height: 50px;
    color: #ffffff;
    align-items: center;
    // opacity: 0.8;
  }
  .songList-content-firstli {
    margin-top: 20px;
    box-sizing: border-box;
    position: relative;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;

    input {
      width: 14px;
      height: 14px;
      border: 0;
      position: absolute;
      background: transparent;
    }
  }

  .songList-content-secondli {
    width: 695px;
    margin-left: 4px;
  }
  .songList-content-thirdli {
    width: 250px;
    padding-left: 15px;
  }
  .songList-content-lastli {
    width: 95px;
  }
}
.songList-content-index {
  width: 36px;
  text-align: right;
}

.songList-content-thirdli a:hover {
  color: pink;
  opacity: 1;
}
.songList-content-secondli a:hover {
  opacity: 1;
  color: #fff;
}

// PlayPosition
.PlayPosition {
  position: absolute;
  bottom: 170px;
  left: 0;
  right: 0;
  z-index: 999999999999;
}
</style>
